<template>
  <div class="box">
    <div class="head-fixed">
      <div class="head">
        <div class="head-div">
          <img src="../../assets/zjt2.png" alt="" class="back" @click="back()" />
        </div>
        <div class="head-search">邀约信息</div>
        <div @click="save()">发送</div>
      </div>
    </div>
    <div class="content">
      <div class="inpBox">
        <span>邀约职位</span>
        <div @click="prop()">
          <input type="text" v-model="payValue" placeholder="请选择邀约职位" readonly/>
        </div>
      </div>
      <div class="inpBox">
        <span>公司名称</span>
        <div>
          <input type="text" v-model="invite.interviewCompany" placeholder="请输入公司名称" />
        </div>
      </div>
      <div class="inpBox">
        <span>面试时间</span>
        <div>
          <input type="date" v-model="invite.times" placeholder="请输入面试时间" />
        </div>
      </div>
      <div class="inpBox">
        <span>面试地点</span>
        <div>
          <input type="text" v-model="invite.interviewLocation" placeholder="请输入面试地点" />
        </div>
      </div>
      <div class="inpBox">
        <span>联系人</span>
        <div>
          <input type="text" v-model="invite.interviewUser" placeholder="请输入联系人" />
        </div>
      </div>
      <div class="inpBox">
        <span>联系电话</span>
        <div>
          <input type="text" v-model="invite.interviewMobile" placeholder="请输入联系电话" />
        </div>
      </div>
      <div class="inpBoxs">
        <div class="inpBox">
          <span>备注</span>
          <span style="font-size:12px;color:#757575">需要应聘者准备的东西填写在下方</span>
        </div>
        <textarea placeholder="请填写您的要求" v-model="invite.remarks"></textarea>
      </div>
    </div>
    <mt-popup v-model="payIf" position="bottom">
      <p class="mt-p">
        <span @click="off()">取消</span>请选择邀约职位
        <span @click="on()">确定</span>
      </p>
      <mt-picker
        :slots="payList"
        @change="payChange"
        value-key="name"
        class="picker"
      ></mt-picker>
    </mt-popup>
  </div>
</template>

<script>
import {Popup, Picker, Toast} from 'mint-ui'
import Vue from 'vue'
var payValue = ''
export default {
  inject: ['reload'],
  name: 'invite',
  components: {Popup, Picker},
  created () {
    // created 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
  },
  mounted () {
    let that = this
    this.$http({
      method: 'get',
      url: Vue.prototype.AppURL + '/user/query/company/recuit/list',
      params: {
        companyId: this.companyId
      }
    }).then(({data}) => {
      if (data.data) {
        that.payList[0].values = data.data
        if (that.payList[0].values[0]) {
          that.invite.interviewCompany = that.payList[0].values[0].companyName
        }
      }
    })
  },
  // data() 为变量赋值等
  data () {
    return {
      // status为状态，0是新增，1是修改
      status: localStorage.status,
      companyId: localStorage.getItem('cache_company_id'),
      city: '',
      post: '',
      state: '',
      payValue: '',
      payIf: false,
      payList: [
        {
          values: ['xxx', 'aaa', 'zzz', 'ddd', 'eee', 'www']
        }
      ],
      pay: [],
      invite: {
        resumeId: localStorage.getItem('company_resume_user_id'),
        recruitId: null,
        interviewStatus: 0,
        times: null,
        interviewLocation: null,
        remarks: null,
        interviewUser: null,
        interviewMobile: null,
        interviewCompany: null
      }
    }
  },
  // methods 编写js函数
  methods: {
    notEmpty (val) {
      const re = new RegExp('^[ ]+$')
      return !(val == null || val === '' || typeof (val) === 'undefined' || re.test(val))
    },
    save () {
      if (!this.notEmpty(this.invite.recruitId)) {
        return Toast('请选择邀约职位')
      }
      if (!this.notEmpty(this.invite.interviewCompany)) {
        return Toast('请输入公司名称')
      }
      if (!this.notEmpty(this.invite.times)) {
        return Toast('请选择面试时间')
      }
      if (!this.notEmpty(this.invite.interviewLocation)) {
        return Toast('请输入面试地点')
      }
      if (!this.notEmpty(this.invite.interviewUser)) {
        return Toast('请输入联系人')
      }
      if (!this.notEmpty(this.invite.interviewMobile)) {
        return Toast('请输入联系电话')
      }
      if (this.invite.interviewMobile.length !== 11) {
        return Toast('请输入正确的联系电话')
      }
      this.$http({
        method: 'post',
        url: Vue.prototype.AppURL + '/user/save/user/inter',
        data: this.invite
      }).then(({ data }) => {
        if (data) {
          Toast('邀约成功')
          this.back()
        } else {
          Toast('邀约失败')
        }
        // this.$router.push({name: 'manage'})
      })
    },
    back () {
      this.$router.go(-1) // 返回上一层
    },
    act (i) {
      this.welfare[i].type = !this.welfare[i].type
    },
    prop () {
      this.payIf = !this.payIf
    },
    payChange (picker, values) {
      payValue = picker.values[0].name
      this.invite.recruitId = picker.values[0].id
    },
    on () {
      this.payValue = payValue
      this.payIf = false
    },
    off () {
      payValue = ''
      this.payIf = false
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,
body,
.tac,
.box,
.tab-left,
.tab-left .el-menu {
  height: 100%;
}

.box {
  width: 100%;
  background: #fff;
}
.head-fixed {
  width: 100%;
  height: 43px;
  position: fixed;
  z-index: 999;
}
.head {
  background: #3e63a8;
  color: #fff;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}
.back {
  width: 14px;
  height: 14px;
}
.head div img {
  width: 20px;
  height: 20px;
}
.head-search {
  box-sizing: border-box;
  flex: 1;
  text-align: center;
  font-size: 14px;
}
.content {
  position: relative;
  top: 43px;
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px 20px 20px;
}
.inpBox {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  border-bottom: 1px solid #eee;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  font-size: 14px;
}
.inpBox input {
  border: 0;
  flex: 1;
  outline: none;
  font-size: 14px;
  height: 30px;
  text-align: right;
}
.inpBox div {
  display: flex;
  align-items: center;
}
.inpBoxs {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}
.inpBoxs .inpBox{
  border: 0;
}
.inpBoxs textarea{
  width: 100%;
  height: 150px;
  margin-top: 10px;
  box-sizing: border-box;
  padding: 10px;
}
</style>
